import { logout } from '@/store/slices/login';
import { isAuth } from '@/utils/token';
import { useDispatch } from 'react-redux';
import { Navigate, Outlet, useLocation } from 'react-router-dom';

type props = {
  // 子节点，React.ReactNode表示所有可以渲染的内容
  // 子节点，ReactElement表示React元素
  children?: React.ReactElement;
};

const AuthRoute = ({ children }: props) => {
  const location = useLocation();
  const dispatch = useDispatch();

  const isLogin = isAuth();
  // 1.判断是否登录
  if (isLogin) {
    //   如果有children那就返回children
    if (children) {
      return children;
    }
    // 否则就返回outlet子路由占位渲染
    return <Outlet />;
  }
  //   没有登录清除token
  dispatch<any>(logout());
  // 3.如果没登录就重定向到登录页面
  return (
    <Navigate
      to="/login"
      //    state 表示重定向时传入额外的数据，这个数据可以在登录页面获取到
      state={{
        from: location.pathname,
      }}
      // 使用路由的replace模式  来作为路由跳转
      replace
    />
  );
};

export default AuthRoute;
